<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  ArrowLeft,
  ArrowRight,
  Loading,
  CircleCheckFilled,
  Document,
  Timer
} from "@element-plus/icons-vue";
import {
  getAllTransferDepartment,
  getDepartmentAdministrator,
  initiateChangeOfDepartment,
  approvalToDepartment,
  getApprovalOrderDepartment,
  getChangeDepartmentHistory
} from "@/api";
import { http } from "@/utils/http";
import { baseUrlApi } from "@/api";
import { storageLocal } from "@pureadmin/utils";
import { userKey, type DataInfo } from "@/utils/auth";

// 定义管理员接口
interface Administrator {
  name: string;
  id: number;
  avatar_url: string;
  role_id: number; // 添加角色ID
}

// 定义当前用户角色接口
interface UserRole {
  id: number;
  name: string;
  description: string;
  created_at: string;
  updated_at: string;
  admin_id: number;
  role_id: number;
}

// 定义专业接口
interface Major {
  id: number;
  oid: string;
  zh_name: string;
  pid: string;
  class_id: number;
  class_name: string;
  seqnum_id: number | null;
  is_valid: number;
}

// 定义审批历史接口
interface ApprovalRecord {
  id: number;
  henau_number: string;
  name: string;
  current_department: string;
  target_department: string;
  remarks: string | null;
  initiator_id: number;
  reviewer_id: number;
  status: string;
  created_at: string;
  updated_at: string;
  office_name: string;
  office_code: string;
}

// 定义部门接口
interface Department {
  id: number;
  oid: string;
  zh_name: string;
  pid: string;
  class_id: number;
  class_name: string;
  seqnum_id: number | null;
  is_valid: number;
}

// 定义科室接口
interface Section {
  id: number;
  oid: string;
  zh_name: string;
  pid: string;
  class_id: number;
  class_name: string;
  seqnum_id: number | null;
  is_valid: number;
}

// 定义分页信息接口
interface PaginationInfo {
  total: number;
  per_page: number;
  current_page: number;
  last_page: number;
  has_more: boolean;
  has_last: boolean;
}

// 当前激活的步骤
const active = ref(0);

// 是否显示审批历史
const showHistory = ref(false);

// 是否显示申请历史
const showApplyHistory = ref(false);

// 管理员列表
const administrators = ref<Administrator[]>([]);

// 选中的管理员ID
const selectedAdministrator = ref<number>();

// 班级列表
const classList = ref<Major[]>([]);

// 部门列表
const departmentList = ref<Department[]>([]);

// 科室列表
const sectionList = ref<Section[]>([]);

// 学生信息表单数据
const studentForm = reactive({
  studentId: "",
  name: "",
  currentDepartment: "",
  targetDepartment: "",
  targetSection: "",
  reason: ""
});

// 审批历史数据
const historyList = ref<ApprovalRecord[]>([]);

// 审批历史分页信息
const approvalPagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

// 专业列表
const majorList = ref<Major[]>([]);

// 申请历史数据
const applyHistoryList = ref<ApprovalRecord[]>([]);

// 分页信息
const pagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

// 获取当前用户信息
const currentUserInfo = storageLocal().getItem<DataInfo<number>>(userKey);

// 获取所有部门
const fetchAllDepartments = async () => {
  try {
    const response = await getAllTransferDepartment({
      type_id: 3,
      pid: ""
    });
    if (response.status === "success") {
      departmentList.value = response.data;
    } else {
      ElMessage.error("获取部门列表失败");
    }
  } catch (error) {
    ElMessage.error("获取部门列表失败");
  }
};

// 获取科室列表
const fetchSectionList = async (departmentOid: string) => {
  try {
    console.log("获取科室列表，部门oid：", departmentOid);
    const response = await getAllTransferDepartment({
      type_id: 4,
      pid: departmentOid
    });
    if (response.status === "success") {
      sectionList.value = response.data;
      console.log("科室列表：", response.data);
    } else {
      ElMessage.error("获取科室列表失败");
      sectionList.value = [];
    }
  } catch (error) {
    console.error("获取科室列表错误：", error);
    ElMessage.error("获取科室列表失败");
    sectionList.value = [];
  }
};

// 监听当前部门变化
const handleCurrentDepartmentChange = async (value: string) => {
  if (value) {
    try {
      // 获取管理员信息，使用当前部门
      const response = await getDepartmentAdministrator({
        department: value
      });
      if (response.status === "success") {
        if (response.data && response.data.length > 0) {
          administrators.value = response.data;
          selectedAdministrator.value = undefined;
        } else {
          ElMessage.warning("当前部门管理员为空");
          administrators.value = [];
          selectedAdministrator.value = undefined;
        }
      }
    } catch (error) {
      ElMessage.error("获取部门管理员信息失败");
      administrators.value = [];
      selectedAdministrator.value = undefined;
    }
  } else {
    administrators.value = [];
    selectedAdministrator.value = undefined;
  }
};

// 监听转入部门变化
const handleTargetDepartmentChange = async (value: string) => {
  if (value) {
    try {
      // 获取选中部门的信息用于获取科室列表
      const selectedDepartment = departmentList.value.find(
        dept => dept.zh_name === value
      );
      if (selectedDepartment) {
        // 使用部门的oid获取科室列表
        await fetchSectionList(selectedDepartment.oid);
      } else {
        ElMessage.warning("未找到对应的部门信息");
        sectionList.value = [];
      }
    } catch (error) {
      console.error("获取科室列表失败：", error);
      ElMessage.error("获取科室列表失败");
      sectionList.value = [];
    }
  } else {
    sectionList.value = [];
  }
  // 清空已选择的科室
  studentForm.targetSection = "";
};

// 获取审批历史
const fetchApprovalHistory = async (page: number = 1) => {
  try {
    const response = await getApprovalOrderDepartment({
      page,
      size: 10
    });
    if (response.status === "success") {
      historyList.value = response.data.records;
      approvalPagination.value = response.data.pagination;
    } else {
      ElMessage.error("获取审批历史失败");
    }
  } catch (error) {
    ElMessage.error("获取审批历史失败");
  }
};

// 获取申请历史
const fetchApplyHistory = async (page: number = 1) => {
  try {
    const response = await getChangeDepartmentHistory({
      page,
      size: 10
    });

    if (response.status === "success") {
      applyHistoryList.value = response.data.records;
      pagination.value = response.data.pagination;
    } else {
      ElMessage.error("获取申请历史失败");
    }
  } catch (error) {
    ElMessage.error("获取申请历史失败");
  }
};

// 处理页码变化
const handleCurrentChange = (page: number) => {
  fetchApplyHistory(page);
};

// 处理审批历史分页变化
const handleApprovalPageChange = (page: number) => {
  fetchApprovalHistory(page);
};

// 状态标签类型映射
const getStatusType = (
  status: string
): "success" | "warning" | "info" | "danger" | "primary" => {
  const statusMap: Record<
    string,
    "success" | "warning" | "info" | "danger" | "primary"
  > = {
    pending: "warning",
    rejected: "danger",
    approved: "success",
    other: "info"
  };
  return statusMap[status] || "info";
};

// 状态文本映射
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: "审批中",
    rejected: "被拒绝",
    approved: "已审批",
    other: "其他"
  };
  return statusMap[status] || "其他";
};

// 下一步
const nextStep = async () => {
  if (active.value === 0) {
    // 验证是否选择了管理员
    if (administrators.value.length > 0 && !selectedAdministrator.value) {
      ElMessage.warning("请选择部门管理员");
      return;
    }

    // 验证表单数据
    if (
      !studentForm.studentId ||
      !studentForm.name ||
      !studentForm.currentDepartment ||
      !studentForm.targetDepartment ||
      !studentForm.targetSection
    ) {
      ElMessage.warning("请填写完整的表单信息");
      return;
    }

    try {
      // 获取选中科室的 oid
      const selectedSection = sectionList.value.find(
        section => section.zh_name === studentForm.targetSection
      );

      if (!selectedSection) {
        ElMessage.warning("请选择转入科室");
        return;
      }

      // 发送转部门申请
      const response = await initiateChangeOfDepartment({
        henau_number: studentForm.studentId,
        name: studentForm.name,
        original_department: studentForm.currentDepartment,
        target_department: studentForm.targetDepartment,
        target_auditor_id: selectedAdministrator.value,
        office_oid: selectedSection.oid
      });

      if (response.status === "success") {
        // 获取选中的管理员信息
        const selectedAdmin = administrators.value.find(
          admin => admin.id === selectedAdministrator.value
        );

        // 判断是否可以自动审批
        const canAutoApprove =
          selectedAdmin && selectedAdmin.id === currentUserInfo?.admin_id;

        // 设置状态并显示相应消息
        active.value = 1;
        ElMessage.success(response.msg || "申请提交成功");

        if (canAutoApprove) {
          // 如果是管理员，提示进入审批历史页面审批
          ElMessage({
            type: "info",
            message: "您是该部门管理员，可以进入审批历史页面直接进行审批",
            duration: 10000
          });
        } else {
          ElMessage.success("已通知部门管理员");
        }
      } else {
        ElMessage.error(response.msg || "申请提交失败");
      }
    } catch (error) {
      console.error("操作失败：", error);
      ElMessage.error("操作失败");
    }
  } else if (active.value === 1) {
    active.value++;
    ElMessage.success("转部门申请成功");
  }
};

// 上一步
const prevStep = () => {
  if (active.value > 0) active.value--;
};

// 切换显示
const toggleView = () => {
  showApplyHistory.value = false;
  showHistory.value = !showHistory.value;
  if (showHistory.value) {
    fetchApprovalHistory(1);
  }
};

// 切换申请历史显示
const toggleApplyHistory = () => {
  showHistory.value = false;
  showApplyHistory.value = !showApplyHistory.value;
  if (showApplyHistory.value) {
    fetchApplyHistory(1);
  }
};

// 处理通过申请
const handleApprove = async (row: ApprovalRecord) => {
  try {
    const response = await approvalToDepartment({
      id: row.id,
      status: "approved"
    });

    if (response.status === "success") {
      ElMessage.success("审批通过成功");
      // 刷新列表
      fetchApprovalHistory();
    } else {
      ElMessage.error("审批失败");
    }
  } catch (error) {
    ElMessage.error("操作失败");
  }
};

// 处理拒绝申请
const handleReject = async (row: ApprovalRecord) => {
  try {
    const response = await approvalToDepartment({
      id: row.id,
      status: "rejected"
    });

    if (response.status === "success") {
      ElMessage.success("已拒绝申请");
      // 刷新列表
      fetchApprovalHistory();
    } else {
      ElMessage.error("审批失败");
    }
  } catch (error) {
    ElMessage.error("操作失败");
  }
};

// 清空表单
const resetForm = () => {
  studentForm.studentId = "";
  studentForm.name = "";
  studentForm.currentDepartment = "";
  studentForm.targetDepartment = "";
  studentForm.targetSection = "";
  studentForm.reason = "";
  selectedAdministrator.value = undefined;
  administrators.value = [];
  sectionList.value = [];
};

// 在组件挂载时获取部门列表
onMounted(() => {
  fetchAllDepartments();
});
</script>

<template>
  <div class="change-major-container">
    <div class="header">
      <h2 class="title">教职工转部门申请</h2>
    </div>

    <el-tag
      :type="showHistory ? 'info' : 'primary'"
      class="toggle-tag right-tag"
      @click="toggleView"
    >
      {{ showHistory ? "返回表单" : "审批历史" }}
    </el-tag>

    <el-tag
      :type="showApplyHistory ? 'info' : 'success'"
      class="toggle-tag left-tag"
      @click="toggleApplyHistory"
    >
      {{ showApplyHistory ? "返回表单" : "申请历史" }}
    </el-tag>

    <!-- 申请历史内容 -->
    <div v-if="showApplyHistory" class="history-content">
      <div class="history-header">
        <el-tag type="info" class="history-title" effect="dark"
          >申请历史</el-tag
        >
        <el-tag
          type="primary"
          class="return-button"
          @click="showApplyHistory = false"
        >
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-tag>
      </div>
      <el-table
        :data="applyHistoryList"
        style="width: 100%"
        :header-cell-style="{
          textAlign: 'center',
          background: 'var(--el-bg-color-overlay)',
          color: 'var(--el-text-color-primary)',
          fontWeight: '600'
        }"
        :cell-style="{
          textAlign: 'center'
        }"
      >
        <el-table-column prop="henau_number" label="工号" width="120" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="current_department" label="当前部门" />
        <el-table-column prop="target_department" label="转入部门" />
        <el-table-column prop="office_name" label="转入科室" />
        <el-table-column prop="created_at" label="申请日期" width="160" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" effect="light">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-if="pagination.total > 0"
          :current-page="pagination.current_page"
          :page-size="pagination.per_page"
          :total="pagination.total"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 申请表单 -->
    <div v-if="!showHistory && !showApplyHistory">
      <el-steps :active="active" finish-status="success" class="steps">
        <el-step title="填写教职工信息" />
        <el-step title="部门管理员审核" />
        <el-step title="完成" />
      </el-steps>

      <div class="step-content">
        <!-- 第一步：填写教职工信息 -->
        <div v-if="active === 0">
          <el-form :model="studentForm" label-width="120px">
            <el-form-item label="工号">
              <el-input
                v-model="studentForm.studentId"
                placeholder="请输入工号"
              />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="studentForm.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="当前部门">
              <el-select
                v-model="studentForm.currentDepartment"
                filterable
                placeholder="请选择当前部门"
                @change="handleCurrentDepartmentChange"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.id"
                  :label="item.zh_name"
                  :value="item.zh_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="转入部门">
              <el-select
                v-model="studentForm.targetDepartment"
                filterable
                placeholder="请选择转入部门"
                @change="handleTargetDepartmentChange"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.id"
                  :label="item.zh_name"
                  :value="item.zh_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="转入科室">
              <el-select
                v-model="studentForm.targetSection"
                filterable
                placeholder="请选择转入科室"
                :disabled="!studentForm.targetDepartment"
              >
                <el-option
                  v-for="item in sectionList"
                  :key="item.id"
                  :label="item.zh_name"
                  :value="item.zh_name"
                />
              </el-select>
            </el-form-item>

            <!-- 管理员选择部分 -->
            <el-form-item v-if="administrators.length" label="部门管理员">
              <div class="administrators-container">
                <el-radio-group v-model="selectedAdministrator">
                  <div class="administrators-grid">
                    <div
                      v-for="admin in administrators"
                      :key="admin.id"
                      class="administrator-item"
                    >
                      <el-radio :label="admin.id">
                        <div class="administrator-info">
                          <el-avatar :size="40" :src="admin.avatar_url" />
                          <span class="administrator-name">{{
                            admin.name
                          }}</span>
                        </div>
                      </el-radio>
                    </div>
                  </div>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 第二步：等待部门管理员审核 -->
        <div v-if="active === 1" class="step-info">
          <el-icon class="success-icon"><CircleCheckFilled /></el-icon>
          <p>已通知部门管理员，请等待审核结果</p>
          <p class="sub-info">您可以随时返回查看审核进度</p>
          <div class="step-buttons">
            <el-tag
              type="primary"
              class="action-tag"
              @click="
                resetForm();
                active = 0;
              "
            >
              <el-icon><ArrowLeft /></el-icon>
              返回修改
            </el-tag>
          </div>
        </div>

        <!-- 第三步：完成 -->
        <div v-if="active === 2" class="step-info">
          <el-icon class="success-icon"><CircleCheckFilled /></el-icon>
          <p>转部门申请已完成！</p>
        </div>

        <!-- 操作按钮 -->
        <div v-if="active === 0" class="step-buttons">
          <div class="button-wrapper">
            <el-tag type="primary" class="action-tag" @click="nextStep">
              下一步
              <el-icon><ArrowRight /></el-icon>
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 审批历史 -->
    <div v-if="showHistory && !showApplyHistory" class="history-content">
      <div class="history-header">
        <el-tag type="info" class="history-title" effect="dark"
          >审批历史</el-tag
        >
        <el-tag
          type="primary"
          class="return-button"
          @click="showHistory = false"
        >
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-tag>
      </div>
      <el-table
        :data="historyList"
        style="width: 100%"
        :header-cell-style="{
          textAlign: 'center',
          background: 'var(--el-bg-color-overlay)',
          color: 'var(--el-text-color-primary)',
          fontWeight: '600'
        }"
        :cell-style="{
          textAlign: 'center'
        }"
      >
        <el-table-column
          prop="henau_number"
          label="工号"
          width="120"
          align="center"
        />
        <el-table-column prop="name" label="姓名" width="100" align="center" />
        <el-table-column
          prop="current_department"
          label="当前部门"
          align="center"
        />
        <el-table-column
          prop="target_department"
          label="转入部门"
          align="center"
        />
        <el-table-column prop="office_name" label="转入科室" align="center" />
        <el-table-column
          prop="created_at"
          label="申请日期"
          width="160"
          align="center"
        />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" effect="light">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <div class="operation-buttons">
              <el-tag
                v-if="row.status === 'pending'"
                type="success"
                class="operation-button"
                effect="plain"
                @click="handleApprove(row)"
              >
                通过
              </el-tag>
              <el-tag
                v-if="row.status === 'pending'"
                type="danger"
                class="operation-button"
                effect="plain"
                @click="handleReject(row)"
              >
                拒绝
              </el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-if="approvalPagination.total > 0"
          :current-page="approvalPagination.current_page"
          :page-size="approvalPagination.per_page"
          :total="approvalPagination.total"
          layout="prev, pager, next"
          @current-change="handleApprovalPageChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* 响应式适配 */
@media screen and (width <= 768px) {
  .step-content {
    padding: 20px;
    margin: 0 15px;
  }

  .title {
    margin-bottom: 30px;
    font-size: 20px;
  }

  :deep(.el-form-item__label) {
    display: block;
    float: none;
    padding: 0 0 10px;
    text-align: left;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }

  .button-wrapper {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .action-tag {
    justify-content: center;
  }
}

/* 响应式适配 */
@media screen and (width <= 768px) {
  .header {
    margin-top: 40px;
  }

  .toggle-tag {
    top: 10px;
    right: 10px;
  }

  .history-content {
    padding: 10px;
    margin: 0 15px;
  }
}

/* 响应式适配 */
@media screen and (width <= 768px) {
  .left-tag {
    left: 10px;
  }

  .right-tag {
    right: 10px;
  }
}

.change-major-container {
  position: relative;
  padding: 20px;
  margin: 0 auto;
}

.title {
  padding: 10px;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  text-align: center;
}

.steps {
  max-width: 800px;
  margin: 30px auto 50px;
}

:deep(.el-step__title) {
  font-size: 15px;
  color: var(--el-text-color-regular) !important;
}

:deep(.el-step__title.is-process) {
  font-weight: 600;
  color: var(--el-color-primary) !important;
}

:deep(.el-step__title.is-success) {
  color: var(--el-color-success) !important;
}

.step-content {
  max-width: 600px;
  padding: 30px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
}

/* 深色模式适配 */
:deep(.el-input__wrapper) {
  background-color: transparent !important;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--el-border-color) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--el-border-color-hover) !important;
  transform: translateY(-1px);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px var(--el-color-primary) !important;
  transform: translateY(-2px);
}

:deep(.el-input__inner) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-input__inner::placeholder) {
  opacity: 0.7;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-input__wrapper.is-focus .el-input__inner::placeholder) {
  opacity: 0.5;
  transform: translateX(4px);
}

:deep(.el-textarea__inner) {
  min-height: 120px !important;
  resize: vertical;
  background-color: transparent !important;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-textarea__inner:hover) {
  transform: translateY(-1px);
}

:deep(.el-textarea__inner:focus) {
  transform: translateY(-2px);
}

:deep(.el-textarea__inner::placeholder) {
  opacity: 0.7;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-textarea__inner:focus::placeholder) {
  opacity: 0.5;
  transform: translateX(4px);
}

:deep(.el-form-item) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

:deep(.el-form-item:hover) {
  transform: translateX(4px);
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: var(--el-text-color-regular);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-form-item:hover .el-form-item__label) {
  color: var(--el-color-primary);
}

.step-info {
  padding: 60px 0;
  text-align: center;
}

.step-info p {
  margin-top: 20px;
  font-size: 16px;
  color: var(--el-text-color-secondary);
}

.step-info .sub-info {
  margin-top: 10px;
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.step-info .step-buttons {
  margin-top: 30px;
}

.waiting-icon {
  font-size: 64px;
  color: var(--el-color-primary);
  animation: rotate 2s linear infinite;
}

.success-icon {
  font-size: 64px;
  color: var(--el-color-success);
  animation: scale 0.5s ease-in-out;
}

.step-buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

.button-wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.action-tag {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-tag:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.action-tag:active {
  transform: translateY(0);
}

:deep(.el-tag .el-icon) {
  font-size: 14px;
}

.header {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.toggle-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-tag:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.history-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
  padding: 30px;
  margin: 0 auto;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30px;
}

.history-title {
  font-size: 16px;
  border-radius: 4px;
}

.return-button {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.return-button:hover {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.return-button .el-icon {
  margin-right: 4px;
}

:deep(.el-table) {
  --el-table-border-color: var(--el-border-color-light);
  --el-table-header-bg-color: var(--el-bg-color-overlay);
  --el-table-row-hover-bg-color: var(--el-fill-color-light);

  width: 100% !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}

:deep(.el-table .cell) {
  padding: 12px 8px;
  line-height: 1.5;
}

.administrators-container {
  width: 100%;
  padding: 10px;
}

.administrators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  width: 100%;
}

.administrator-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.administrator-item:hover {
  border-color: var(--el-color-primary-light-5);
  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.administrator-info {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: 8px;
}

.administrator-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

:deep(.el-radio__label) {
  display: flex;
  align-items: center;
  padding-left: 8px;
}

:deep(.el-radio__inner) {
  width: 16px;
  height: 16px;
}

:deep(.el-radio__inner::after) {
  width: 6px;
  height: 6px;
}

:deep(.el-avatar) {
  border: 2px solid var(--el-border-color-lighter);
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
}

.administrator-item:hover :deep(.el-avatar) {
  border-color: var(--el-color-primary-light-5);
  transform: scale(1.05);
}

:deep(.el-select) {
  width: 100%;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.operation-button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.operation-button:hover {
  transform: translateY(-2px);
}

.left-tag {
  right: 140px;
}

.right-tag {
  right: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
